<div ng-controller="liveDetCtr">
    <div ng-include="'tpl/logoDetail.html'" style="position: fixed;width: 100%;z-index:130"></div>
    <!--配合导航固定定位高度和logo所在div一致-->
    <div style="width: 100%;height: 3.911rem"></div>

    <!--直播详情头部2选一添加ng-if-->
    <div class="live_deta_head">
        <!--图文直播头部-->
        <div ng-if="liveImgOrVedioObj.length<1" class="livdeta_art">
            <!--<div  class="livdeta_art_img">banner图</div>-->
            <div><img src="{{liveDetail.main.config.appBannerUrl||'static/45.png'}}" style="height: 89px;width: 100%" onerror="globalBitmap(this)"></div>
           <div class="liveDetailTitlTex">
               <h5>{{liveDetail.main.title}}</h5>
               <p>{{liveDetail.main.content}}</p>
           </div>
        </div>
        <!--视频直播 头部-->
        <div ng-if="liveImgOrVedioObj.length>0"  class="livdeta_video" style="height: 230px;">
            <!--直播中-->
            <div ng-if="liveDetailStatus==1">
                    <!--直播中有流ng-if="Number(streamCurrentStatus)==1" -->
                    <div ng-if="streamCurrentStatus==1">
                        <div class="live_vedio" style="width: 100%;height: 100%;background: #000;position: relative;z-index:10;">
                            <div id="id_test_video" style="height: 230px"></div>
                        </div>
                        <!--定位-->
                        <div class="liveHeadTiText">
                            <h5><span class="liveHeadTiTextOne">{{liveDetail.main.title}}</span> <span class="liveHeadTiTextTwo">{{liveCountClick||0}}人参与</span></h5>
                            <div class="livdeta_video_line" ng-if="liveImgOrVedioObj.length>=2">
                                <div class="liveChaneP"><div ng-repeat="vedioChanList in liveImgOrVedioObj track by $index" ng-init="liveChannelIndex=$index" ng-click="chanLivePath(liveChannelIndex)" class="liveChannelPath">线路{{liveChannelIndex+1}}</div></div>
                                <!-- <p>线路2</p>-->
                            </div>
                        </div>

                    </div>
                    <!--直播中无流-->
                    <div ng-if="streamCurrentStatus!=1" style="position: relative">
                        <span class="otherStatusTitle">{{liveDetail.main.title}}</span>
                        <span class="otherStatus">直播员暂时离开</span>
                    </div>
            </div>
            <!--直播预告-->
            <div ng-if="liveDetailStatus==0" style="position: relative">
                <span class="otherStatusTitle">{{liveDetail.main.title}}</span>
                <span class="otherStatus">直播将于{{liveDetailStartTime|cutSecond}}开始</span>
            </div>
            <!--直播结束-->
            <div ng-if="liveDetailStatus==2">
                <div ng-if="!webPlaybackUrl" style="position: relative">
                    <span class="otherStatusTitle">{{liveDetail.main.title}}</span>
                    <span class="otherStatus">直播已结束，稍后回来看精彩回放</span>

                </div>
                <div ng-if="webPlaybackUrl" class="otherStatus">
                    <!--播放m3u8直播回放-->
                    <div class="live_vedio" style="width: 100%;height: 100%;background: #000;position: relative;z-index:10;">
                        <div id="id_test_video" style="height: 230px"></div>
                    </div>
                    <!--定位-->
                    <div class="liveHeadTiText">
                        <h5><span class="liveHeadTiTextOne">{{liveDetail.main.title}}</span> <span class="liveHeadTiTextTwo">{{liveCountClick||0}}人参与</span></h5>
                        <div class="livdeta_video_line" >
                            <div class="liveChaneP"><div ng-repeat="vedioChanList in liveImgOrVedioObj track by $index" ng-init="liveChannelIndex=$index" ng-click="chanLivePath(liveChannelIndex)" class="liveChannelPath">线路{{liveChannelIndex+1}}</div></div>
                            <!-- <p>线路2</p>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height:10px;width:100%;background:#f6f6f6;"></div>
    <!--直播与聊天室内容-->
    <div>
        <div class="live_gla_title">
            <div class="liveGlaytit" style="margin: 0 25%">
                <a id="btn" ng-click="changshowLive()" class="live_glasy">直播</a>
                <a id="btns" ng-click="changshowChat()" class="live_chat">聊天室</a>
            </div>
        </div>

        <!--需要判断是直播还是聊天室  显示与隐藏-->
        <!--点击聊天室时隐藏直播-->
        <!--直播-->
        <div ng-if="showLive" ng-include="'tpl/broadcast.html'"></div>

        <!--聊天室和评论共用模板-->
        <div ng-if="!showLive">
            <div ng-include="'tpl/liveComeTpl.html'"></div>
        </div>
    </div>

    <div class="fiBtn">
        <div ng-show=true ng-click="goBackTop()" class="baToTop">
            <img src="static/19.png" alt="">
        </div>
    </div>
    <div class="fiBtnTop">
        <div ng-show=true ng-click="home()" class="baToTop">
            <img src="static/20.png" alt="">
        </div>
    </div>
</div>

<!--直播模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="margin-top:36%;">
            <!--<div class="modal-header">-->
            <!--&lt;!&ndash;<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>&ndash;&gt;-->
            <!--&lt;!&ndash;<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>&ndash;&gt;-->
            <!--</div>-->
            <div class="modal-body" style="overflow: hidden">
                <div class="swiper-container swiper-scalimgs" >
                    <div class="swiper-wrapper">
                        <div ng-repeat="item in imgScalImg" class="swiper-slide" style="width: 100%;height: 300px">
                            <img class="img-responsive" ng-src="{{item}}" >
                            <!--{{item}}-->
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">提交更改</button>
            </div>-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<style type="text/css">
    /*//直播流的其他状态*/
    .otherStatus{
        line-height: 230px;text-align: center;color: #FFFFFF;
        display: inline-block;
        width: 100%;
        line-height: 230px;
        text-align: center;
        color: #FFFFFF;
        height: 100%;
        margin: 0 auto;
        font-size:1.6rem;
    }
    .otherStatusTitle{
        position: absolute;
        top:1.333rem;
        left:1.333rem ;
        color: #FFFFFF;
        font-size:1.6rem ;
    }
    .vcp-player {
        position: relative;
        z-index: 0;
        font-family: Tahoma, '\5FAE\8F6F\96C5\9ED1', \u5b8b\u4f53,Verdana,Arial,sans-serif;
        background-color: black;
    }
    .vcp-player video{
        display: block;
        overflow: hidden;
    }
    .vcp-fullscreen.vcp-player, .vcp-fullscreen video {
        width: 100%!important;
        height: 100%!important;
    }
    /* 伪全屏 */
    body.vcp-full-window {
        width: 100%!important;
        height: 100%!important;
        overflow-y: auto;
    }
    .vcp-full-window .vcp-player {
        position: fixed;
        left: 0;
        top: 0;
    }


    /* chrome flash 成功加载到DOM之前会闪白屏，所以加个黑屏遮一遮 */
    .vcp-pre-flash {
        z-index: 1000; background: black; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    }
    .vcp-controls-panel {
        position: absolute;
        bottom: 0;
        width: 100%;
        font-size: 16px;
        height: 3em;
        z-index: 1000;
    }
    .vcp-controls-panel.show{
        -webkit-animation: fadeIn ease 0.8s;
        animation: fadeIn ease 0.8s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }
    .vcp-controls-panel.hide{
        -webkit-animation: fadeOut ease 0.8s;
        animation: fadeOut ease 0.8s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }
    .vcp-panel-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgb(36, 36, 36);
        opacity: 0.8;
        filter: alpha(opacity=80);
        z-index: 1000;
    }

    .vcp-playtoggle {
        cursor: pointer;
        position: relative;
        z-index: 1001;
        width: 3em;
        height: 100%;
        float: left;
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/play_btn.png);
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/play_btn.svg), none;
    }
    .vcp-playtoggle:hover, .vcp-playtoggle:focus {
        background-color: slategray;
        opacity: 0.9;
        filter: alpha(opacity=90);
    }
    .touchable .vcp-playtoggle:hover {
        background-color: transparent;
        opacity: 1;
    }
    .vcp-playing .vcp-playtoggle {
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/stop_btn.png);
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/stop_btn.svg), none;
    }
    .vcp-bigplay {
        width: 100%;
        height: 80%; /*会遮住原生控制栏*/
        position: absolute;
        background-color: white\0;
        filter: alpha(opacity=0); /*奇怪的IE8/9鼠标事件穿透*/
        opacity: 0;
        z-index: 1000;
        top: 0;
        left: 0;
    }

    .vcp-slider {
        position: relative;
        z-index: 1001;
        float: left;
        background: rgb(196, 196, 196);
        height: 10px;
        opacity: 0.8;
        filter: alpha(opacity=80);
        cursor: pointer;
    }
    .vcp-slider .vcp-slider-track {
        width: 0;
        height: 100%;
        margin-top: 0;
        opacity: 1;
        filter: alpha(opacity=100);
        background-color: dodgerblue; /*beautiful blue*/
    }
    .vcp-slider .vcp-slider-thumb {
        cursor: pointer;
        background-color: white;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 1em!important;
        height: 10px;
        margin-left: -5px;
        width: 10px;
    }

    .vcp-slider-vertical {
        position: relative;
        width: 0.5em;
        height: 8em;
        top: -5.6em;
        z-index: 1001;
        background-color: rgb(28, 28, 28);
        opacity: 0.9;
        filter: alpha(opacity=90);
        cursor: pointer;
    }
    .vcp-slider-vertical .vcp-slider-track {
        background-color: rgb(18, 117, 207);
        width: 0.5em;
        height: 100%;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }
    .vcp-slider-vertical .vcp-slider-thumb {
        cursor: pointer;
        position: absolute;
        background-color: aliceblue;
        width: 0.8em;
        height: 0.8em;
        border-radius: 0.8em!important;
        margin-top: -0.4em;
        top: 0;
        left: -0.15em;
    }
    /* 时间线/进度条 */
    .vcp-timeline {
        top: -10px;
        left: 0;
        height: 10px;
        position: absolute;
        z-index: 1001;
        width: 100%;
    }
    .vcp-timeline .vcp-slider-thumb {
        top: -4px;
    }
    .vcp-timeline .vcp-slider {
        margin-top: 8px;
        height: 2px;
        width: 100%;
    }
    .vcp-timeline:hover .vcp-slider {
        margin-top: 0;
        height: 10px;
    }
    .vcp-timeline:hover .vcp-slider-thumb {
        display: block;
        width: 16px;
        height: 16px;
        top: -3px;
        margin-left: -8px;
    }
    /* 时间展示 */
    .vcp-timelabel {
        display: inline-block;
        line-height: 3em;
        height: 3em;
        /*width: 3em;*/
        float: left;
        color: white;
        padding: 0 9px;
        z-index: 1001;
        position: relative;
    }
    /* 音量控制 */
    .vcp-volume {
        height: 3em;
        width: 3em;
        cursor: pointer;
        position: relative;
        z-index: 1001;
        float: right;
        background-color: transparent;
        opacity: 0.9;
        filter: alpha(opacity=90);
    }
    .vcp-volume-icon {
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/volume.png);
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/volume.svg), none;
        display: inline-block;
        width: 3em;
        height: 3em;
        position: absolute;
        left: 0;
        top: 0;
    }
    .vcp-volume-muted .vcp-volume-icon {
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/muted.png);
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/muted.svg), none;
    }
    .vcp-volume .vcp-slider-vertical {
        top: -8.4em;
        left: 1em;
        display: none;
    }
    .vcp-volume .vcp-slider-track {
        position: absolute;
        bottom: 0;
    }
    .vcp-volume:hover .vcp-slider-vertical {
        display: block;
    }
    .vcp-volume .vcp-volume-bg {
        height: 8.8em;
        width: 2em;
        position: absolute;
        left: 0.25em;
        top: -8.8em;
        background: rgb(36,36,36);
        display: none;
    }
    .vcp-volume:hover .vcp-volume-bg, .vcp-volume:hover .vcp-slider-vertical {
        display: block;
    }
    /* 全屏控件 */
    .vcp-fullscreen-toggle {
        position: relative;
        width: 3em;
        height: 3em;
        float: right;
        cursor: pointer;
        z-index: 1001;
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen.png);
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen.svg), none;
    }
    .vcp-fullscreen .vcp-fullscreen-toggle {
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen_exit.png);
        background-image: url(//imgcache.qq.com/open/qcloud/video/vcplayer/img/fullscreen_exit.svg), none;
    }

    .vcp-loading {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -3em;
        display: none;
    }

    .vcp-poster {
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
        z-index: 1000;
        width: 100%;
        height: 100%;
        display: none;
    }
    .vcp-poster-pic {
        position: relative;
    }
    .vcp-poster-pic.default{
        left: 50%;
        top: 50%;
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Safari */
        transform: translate(-50%, -50%);
    }
    .vcp-poster-pic.cover{
        width: 100%;
        left: 50%;
        top: 50%;
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Safari */
        transform: translate(-50%, -50%);
    }
    .vcp-poster-pic.stretch{
        width: 100%;
        height: 100%;
    }

    .vcp-error-tips {
        opacity: 0;
        position: absolute;
        z-index: 1001;
        width: 100%;
        height: 4.5em;
        left: 0;
        top: 50%;
        color: orangered;
        margin-top: -5.25em;
        text-align: center;
        display: none;
    }

    .vcp-clarityswitcher{
        height: 3em;
        width: 3em;
        cursor: pointer;
        position: relative;
        z-index: 1001;
        float: right;
        background-color: transparent;
        opacity: 0.9;
    }
    .vcp-vertical-switcher-container{
        width: 3em;
        position: absolute;
        left: 0em;
        bottom: 2.4em;
        background: rgb(36,36,36);
        display: none;
    }
    .vcp-vertical-switcher-current{
        display: block;
        color: #fff;
        text-align: center;
        line-height:3em;
    }
    .vcp-vertical-switcher-item{
        display: block;
        color: #fff;
        text-align: center;
        line-height:2em;
    }
    .vcp-vertical-switcher-item.current{
        color: #888;
    }
    /* animations */
    @-webkit-keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    .fadeOut {
        -webkit-animation: fadeOut ease 0.8s;
        animation: fadeOut ease 0.8s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }

    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .fadeIn {
        -webkit-animation: fadeIn ease 0.8s;
        animation: fadeIn ease 0.8s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }</style>
<style type="text/css"></style>
<script src="trd/live/tcplayer.js"></script>
<script>
    setTimeout(function(){
        $('.vcp-player').css({width:'100%',height:'100%'});
        var player = new TcPlayer('id_test_video', {
              "m3u8"    : liveAllUrl[0].webLiveUrl,//请替换成实际可用的播放地址
              //"m3u8":'http://1253712496.vod2.myqcloud.com/34ce6f67vodgzp1253712496/b15f4d119031868222964537593/playlist_eof.m3u8',
//            "m3u8_hd"   : "http://9390.liveplay.myqcloud.com/live/9390_408_1496733576647.m3u8.av.m3u8",
//            "m3u8_sd"   : "http://9390.liveplay.myqcloud.com/live/9390_408_1496733576647.m3u8.av.m3u8",
            "autoplay"  : true,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
            "coverpic"  : "http://www.test.com/myimage.jpg",
        });

    },1000)

</script>